<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>海岛能源调度平台 - 能源预测</title>
  <link rel="icon" href="data:,">

  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.0/nouislider.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.0/nouislider.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/main.css">
  <script src="/lib/echarts.min.js"></script>

  <style>
    body {
      background-color: #f4f4f4;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem;
    }
    .card {
      background-color: white;
      border-radius: 0.5rem;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      padding: 2rem;
    }
    .chart-container {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      margin-top: 1rem;
    }
    .chart-box {
      flex: 1;
      min-width: 500px;
      height: 400px;
      position: relative;
    }
    .chart-resize-handle {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 20px;
      height: 20px;
      background: #007BFF;
      cursor: nwse-resize;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .chart-box:hover .chart-resize-handle {
      opacity: 0.7;
    }
    #loading-indicator {
      display: none;
      align-items: center;
      margin-top: 1rem;
    }
    .spinner {
      border: 3px solid rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      border-top: 3px solid #007BFF;
      width: 20px;
      height: 20px;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    #error-message {
      display: none;
      margin-top: 1rem;
      padding: 1rem;
      background-color: #fee2e2;
      border: 1px solid #ef4444;
      color: #b91c1c;
      border-radius: 0.375rem;
    }
    /* 添加滑块专用样式 */
    .slider-container {
      background: #f8f9fa;
      border-radius: 8px;
      margin: 20px 0;
    }

    .noUi-target {
      background: #e9ecef;
      border: none;
      box-shadow: none;
    }

    .noUi-connect {
      background: #4dabf7;
    }

    .noUi-handle {
      width: 24px;
      height: 24px;
      top: -9px;
      border: 2px solid #4dabf7;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .noUi-handle::before,
    .noUi-handle::after {
      display: none;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="card">
    <h2 class="text-2xl font-bold mb-4">能源预测</h2>

    <div class="mb-4">
      <div class="file-input-container inline-block relative">
        <input type="file" id="csv-file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
        <label for="csv-file" class="inline-block px-4 py-2 bg-blue-500 text-white rounded cursor-pointer hover:bg-blue-600 transition">
          <i class="fas fa-file-csv mr-2"></i>选择CSV文件
        </label>
        <span id="selected-file-name" class="ml-2 inline-block max-w-xs overflow-hidden text-ellipsis"></span>
      </div>
    </div>
    <button id="predict-btn" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
      生成预测
    </button>

    <div id="loading-indicator" class="hidden">
      <div class="spinner"></div>
      <span class="ml-2 text-gray-600">预测中，请稍候...</span>
    </div>

    <div id="error-message" class="hidden"></div>
  </div>

  <div class="card mt-4">
    <h2 class="text-2xl font-bold mb-4">预测结果</h2>
    <div id="range-controls" class="hidden mb-4 p-3 bg-gray-50 rounded-lg">
      <div class="flex items-center mb-2">
        <span class="mr-2 text-sm font-medium">时间范围:</span>
        <input type="text" id="range-start" class="date-input px-2 py-1 border rounded mr-2">
        <span class="mr-2">至</span>
        <input type="text" id="range-end" class="date-input px-2 py-1 border rounded mr-4">
        <button id="apply-range" class="px-3 py-1 bg-blue-500 text-white rounded text-sm">应用</button>
        <button id="reset-range" class="px-3 py-1 bg-gray-200 rounded text-sm ml-2">重置</button>
      </div>
      <div id="range-slider" class="w-full h-8 mt-2"></div>
    </div>

    <div class="chart-container">
      <div id="forecast-chart" class="chart-box"></div>
      <div id="components-chart" class="chart-box"></div>
    </div>
  </div>
</div>

<script src="/js/app.js"></script>
<script src="/js/forecast.js"></script>
<script>
  // 初始化日期选择器
  $(function() {
    $("#range-start, #range-end").datepicker({
      dateFormat: 'yy-mm-dd'
    });
  });

  // 文件选择显示
  document.getElementById('csv-file').addEventListener('change', function() {
    const fileName = this.files[0]?.name || '';
    document.getElementById('selected-file-name').textContent = fileName;
  });
</script>
</body>
</html>